<template>
  <div class="status-control-card">
    <div class="card-content">
      <!-- 处理状态卡片 -->
      <div class="status-card">
        <div class="card-label">处理状态</div>
        <div class="status-buttons">
          <button
            v-for="status in statusOptions"
            :key="status.value"
            :class="['status-btn', status.value, { active: formData.processingStatus === status.value }]"
            @click="updateStatus(status.value)">
            {{ status.label }}
          </button>
        </div>
      </div>

      <!-- 验收结果卡片 -->
      <div class="info-card" v-if="formData.processingStatus === '已完成'" @click="openAcceptanceDialog">
        <div class="card-label">验收结果</div>
        <div class="card-value" v-if="formData.acceptanceResult !== undefined && formData.acceptanceResult !== ''">
          {{ getAcceptanceLabel(formData.acceptanceResult) }}
        </div>
        <div class="card-placeholder" v-else>
          点击选择验收结果
        </div>
        <div class="card-status status-control">状态控制</div>
      </div>

      <!-- 关闭说明卡片 -->
      <div class="info-card full-width" v-if="formData.processingStatus === '已完成' && formData.acceptanceResult" @click="openClosureDialog">
        <div class="card-label">关闭说明</div>
        <div class="card-value" v-if="formData.closureReason">
          {{ formData.closureReason }}
        </div>
        <div class="card-placeholder" v-else>
          点击填写关闭说明
        </div>
        <div class="card-status status-control">必填项</div>
      </div>
    </div>

    <!-- 验收结果弹窗 -->
    <el-dialog
      title="验收结果"
      :visible.sync="acceptanceDialogVisible"
      width="400px"
      :close-on-click-modal="false">
      <el-radio-group v-model="tempAcceptance">
        <el-radio :label="1" class="acceptance-radio pass">✅ 通过</el-radio>
        <el-radio :label="2" class="acceptance-radio fail">❌ 不通过</el-radio>
        <el-radio :label="0" class="acceptance-radio pending">⏳ 待复检</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="acceptanceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAcceptance">确定</el-button>
      </div>
    </el-dialog>

    <!-- 关闭说明弹窗 -->
    <el-dialog
      title="关闭说明"
      :visible.sync="closureDialogVisible"
      width="600px"
      :close-on-click-modal="false">
      <el-input
        type="textarea"
        v-model="tempClosure"
        :rows="4"
        placeholder="请说明工单关闭原因..."
        class="clean-textarea"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="closureDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveClosure">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'

export default {
  name: 'StatusControlPanel',
  mixins: [dialogMixin],
  props: {
    formData: {
      type: Object,
      required: true
    },
    compact: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      acceptanceDialogVisible: false,
      closureDialogVisible: false,
      tempAcceptance: '',
      tempClosure: '',
      statusOptions: [
        { label: '待处理', value: '待处理' },
        { label: '处理中', value: '处理中' },
        { label: '已完成', value: '已完成' }
      ]
    }
  },
  methods: {
    updateStatus(status) {
      this.formData.processingStatus = status;
      this.$emit('update:status', status);
    },

    openAcceptanceDialog() {
      this.tempAcceptance = this.formData.acceptanceResult || '';
      this.acceptanceDialogVisible = true;
    },

    openClosureDialog() {
      this.tempClosure = this.formData.closureReason || '';
      this.closureDialogVisible = true;
    },

    saveAcceptance() {
      this.formData.acceptanceResult = Number(this.tempAcceptance);
      this.$emit('update:acceptance', this.formData.acceptanceResult);
      this.acceptanceDialogVisible = false;
    },

    saveClosure() {
      this.formData.closureReason = this.tempClosure;
      this.$emit('update:reason', this.tempClosure);
      this.closureDialogVisible = false;
    },

    getAcceptanceLabel(val) {
      const map = { 0: '待复检', 1: '通过', 2: '不通过' };
      return map[val] || val;
    }
  }
}
</script>

<style scoped>
/* 状态控制卡片容器 */
.status-control-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.status-control-card:hover {
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15);
}

/* 卡片内容 */
.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 状态卡片 */
.status-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}



.card-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* 状态按钮组 */
.status-buttons {
  display: flex;
  gap: 8px;
}

.status-btn {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}



.status-btn.待处理 {
  border-color: #fbbf24;
  color: #92400e;
}

.status-btn.待处理.active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  box-shadow: 0 2px 4px rgba(251, 191, 36, 0.3);
}

.status-btn.处理中 {
  border-color: #60a5fa;
  color: #1d4ed8;
}

.status-btn.处理中.active {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
  box-shadow: 0 2px 4px rgba(96, 165, 250, 0.3);
}

.status-btn.已完成 {
  border-color: #34d399;
  color: #047857;
}

.status-btn.已完成.active {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: white;
  box-shadow: 0 2px 4px rgba(52, 211, 153, 0.3);
}

/* 信息卡片 */
.info-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-card.full-width {
  width: 100%;
}

.info-card:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
}

.card-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
  flex: 1;
}

.card-placeholder {
  font-size: 14px;
  color: #94a3b8;
  font-style: italic;
  flex: 1;
}

.card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-status.status-control {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

/* 验收结果单选按钮样式 */
.acceptance-radio {
  display: block;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.acceptance-radio.pass {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.acceptance-radio.fail {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.acceptance-radio.conditional {
  background: #fffbeb;
  border: 1px solid #fed7aa;
}



/* 弹窗样式 */
.clean-textarea >>> .el-textarea__inner {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
  transition: border-color 0.2s ease;
}

.clean-textarea >>> .el-textarea__inner:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.dialog-footer .el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}
</style>